﻿@model WebChatClient.Controllers.Chatter
@{
    Layout = null;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Web site</title>
    <link id="theme" rel="stylesheet" type="text/css" href="../../Content/styletemplate.css" title="theme" />
    <!--Script tabs-->
    <link rel="stylesheet" href="../../Content/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../Scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxcore.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxtabs.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxbuttons.js"></script>
   <link href="../../Content/themes/jquery-ui-1.9.1.custom.css" rel="stylesheet" type="text/css" />
   <script src="../../Scripts/jquery-ui-1.9.1.custom.js" type="text/javascript"></script>
    <script type="text/javascript">

        //var myname = '@Model.Nick';
        var myname = ['@Html.Raw(Model.Nick)']
       
        var listFriend;
        var listfriend2;

        function listClick(name) {
            
            $('#jqxTabs').jqxTabs('addAt', 0, name, "<div id = \"user"+ name +"\" style=\"width: 540px;height: 350px; background-color:#DBDBDB; overflow: auto\"></div><div><form action=\"\" name=\"textchat\" method=\"post\"><div style=\"float:left;\"><textarea name=\"chattext\" id = \"text"+ name +"\" rows=\"3\" cols=\"53\"></textarea></div><input type=\"button\" value=\"send\" style=\"width: 80px;height: 55px;\" name=\""+ name +"\" onclick=\"sendMessage($(this).attr('name'));\"/></form></div>");
        }
        $(document).ready(function () {
            $('#menuFriend').menu();
            var theme = getTheme();
            var addButton,
                addButtonWidth = 29;



            var listFriendChar = new Array();
            // create jqxTabs.
            var index = 0;
            $('#jqxTabs').jqxTabs({ height: 450, width: 550, theme: theme, showCloseButtons: true });
            //
           
            ///



        //Update 

        ///List friend
        (function listfriend() {
            setTimeout(function () {
                $.ajax({ url: "Chat/getFriends", success: function (data) {
                    //Update your dashboard gauge

                    listFriend = eval(data);

                    if (listFriend.length != 0) {
                            
                        var tempTitleLi = "<li class='ui-state-disabled'><a href='#'>Friend List</a></li>";

                        //XÓa list
                        var menuFriend = $('#menuFriend');
                        menuFriend.html('');
                        //Thêm list
                        menuFriend.append(tempTitleLi);
                        for (var i = 0; i < listFriend.length - 1; i++) {
                            if (listFriend[i].Status == 1)
                                var tempLi = "<li><a ondblclick=\"listClick('" + listFriend[i].Nick + "');\"><img src='#' class = 'StatusImage' alt='Status Image'>" + listFriend[i].Nick + " - Online" + "</a><span class='ui-icon ui-icon-close'>Remove Tab</span></li>";
                            else
                                var tempLi = "<li><a ondblclick=\"listClick('" + listFriend[i].Nick + "');\"><img src='#' class = 'StatusImage' alt='Status Image'>" + listFriend[i].Nick + " - Offline" + "</a><span class='ui-icon ui-icon-close'>Remove Tab</span></li>";
                            menuFriend.append(tempLi);
                        }


                        $('#menuFriend').menu("refresh");
                    }



                }, dataType: 'json', complete: listfriend, timeout: 30000
                });
            }, 2000);
        })();

        
            //listfriend2 = listFriend;

        //get messages
        (function getMessages() {
            setTimeout(function () {
                $.ajax({ url: "Chat/getMessages", success: function (data) {
                    //Update your dashboard gauge
                    var listMessages = eval(data);
                    for (var i = 0; i < listMessages.length; i++) {
                      
                        if (listMessages[i].ReceiverName == myname && listMessages[i].IsRead == 1) {
                            var ID = listMessages[i].SenderName;
                            $("#user" + ID).append("<p>" + listMessages[i].SenderName + " : " + listMessages[i].Text + "</p>")
                            $.ajax({
                                url: 'Chat/updateMessage',
                                type: 'POST',
                                data: { 'newmessage': JSON.stringify(listMessages[i]) }
                            });
                        }
                    }
                }, dataType: 'json', complete: getMessages, timeout: 30000
                });
            }, 4000);
        })();


        });


        function sendMessage(name) {

            if ($("#text" + name).val() != "") {
                $("#user" + name).append("<p>" + myname + " : " + $("#text" + name).val() + "</p>");

            }
            $.ajax({
                url: 'Chat/createMessage',
                type: 'POST',
                data: { 'newmessage': $("#text" + name).val(), 'To': name }
            });
            $("#text" + name).val("");
        }


        function addfriend() { $.ajax({
            url: 'Chat/AddFriendConnection',
            type: 'POST',
            data: { 'FriendName': $("#NameText").val() }
        });
        }


        function delfriend() {
            $.ajax({
            url: 'Chat/DeleteFriendConnection',
            type: 'POST',
            data: { 'FriendName': $("#NameText").val() }
        });
        }
        //-- update --


    </script>
    <!--Script menu-->
    <link rel="stylesheet" href="../../Content/jqx.fresh.css" type="text/css" />
    <script type="text/javascript" src="../../Scripts/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxdata.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxscrollbar.js"></script>
  </head>
  <body> 
      <div>

          Friend list management
      <input type ="text" id ="NameText" />
      <input type ="button" value ="Add" id="Add" onclick ="addfriend();"/>
      <input type ="button" value ="Delete" id="Delete" onclick ="delfriend();" />



          </div>
    <!-- top wrapper -->  
    <div id="topWrapper"> 
      <div id="topBannerWrapper"> 
        <div id="topBanner">
        <h1>WEB CHAT</h1>
          <div id="hmenuWrapper"> 
            <div id="hmenu"> 
              <ul>
                <li>
                  <a href="/Chat">Home-Chat</a>
                </li>
                <li>
                  <a href="/FBChat">Facebook Chat</a>
                </li>
                <li>
                  <a href="/Profile">My Profile</a>
                </li>
                <li>
                  <a href="/LogOut">Log Out</a>
                </li>
                <li>
                  <a href="/Home">About</a>
                </li>
              </ul> 
            </div> 
          </div> 
        </div> 
      </div>  
    </div>  
    <!-- end top wrapper -->  
    <div id="wrapper"> 
      <div id="container" style="background:Black"> 
        <!--  content -->  
        <div id="content" > 
            <div style="width: 30%; height: 100%; float: left">
                                <ul id="menuFriend" style="overflow:auto; height:400px" >
                                    <li class="ui-state-disabled"><a href="#">Friend List</a></li>
                               </ul>
                        </div>
                    </div>
                    <!--Chat box-->
                    <div style="width: 70%; height: 100%; float: right">
                    <br /><br />
                        <div id='jqxTabs' style="float: left;">
                            <ul style="margin-left: 30px;" id="unorderedList">
                                <li>Node.js</li>
                                <li canselect='false' style='padding: 5px; font-style: italic; font-size: 14px; border: none;
                                    background: transparent; display:none' hasclosebutton='false'>+</li>
                            </ul>
                            <div>
                          
                                <div>
                                
                                </div>
                            </div>
                            <div>
                            </div>
                        </div>
                    </div>
        </div>  
        <!-- end content -->  
        <div class="clear" style="height:40px"></div> 
      </div>  
      <!-- end container --> 
    </div>   
      
  </body>
</html>
